<!-- Building.vue -->
<script setup lang="ts">
import { onMounted, ref } from "vue"
import { deleteRuleAPI, getRuleListAPI } from "@/pages/carManager/chargeRule/apis"
import AddRule from "./addRuleDialog.vue"
/* ===== 类型声明（对齐后端字段） ===== */
interface RuleItem {
  id: string | number
  ruleNumber: string
  ruleName: string
  freeDuration: number
  chargeCeiling: number
  chargeType: string
  ruleNameView: string
}

/* ===== 数据 ===== */
const params = ref({ page: 1, pageSize: 10 })
const ruleList = ref<RuleItem[]>([
  /* 假数据，接口通了即可删掉 */
  {
    id: 4,
    ruleNumber: "演示1",
    ruleName: "分段计费",
    freeDuration: 15,
    chargeCeiling: 200,
    chargeType: "partition",
    ruleNameView: "2小时内每小时收费6元,每增加1小时,增加2元"
  }
])

/* ===== 方法 ===== */
async function getRuleList() {
  const res = await getRuleListAPI(params.value)
  ruleList.value = res.data.rows // 字段已对好，直接赋值
}
function handleEdit(row: RuleItem) {
  console.log("编辑", row)
}
async function handleDelete(id: number) {
  try {
    await ElMessageBox.confirm(
      "确定删除该规则吗？",
      "Warning",
      {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning"
      }
    )

    const res = await deleteRuleAPI(id)
    if (res.code === 10000) {
      ElMessage.success("删除成功")
      await getRuleList() // 刷新列表
    } else {
      ElMessage.error(res.message || "删除失败")
    }
  } catch (error: any) {
    if (error === "cancel") return // 用户取消
    ElMessage.error(error.message || "删除失败")
  }
}
const dialogVisible = ref(false)
function openAddRuleDialog() {
  dialogVisible.value = true
}

function handleAddSuccess() {
  getRuleList() // 刷新列表数据
}
onMounted(() => getRuleList())
</script>

<template>
  <div class="rule-container">
    <AddRule v-model="dialogVisible" @success="handleAddSuccess" />
    <div class="create-container">
      <el-button type="primary" @click="openAddRuleDialog">
        增加停车计费规则
      </el-button>
      <el-button>导出 Excel</el-button>
    </div>

    <div class="table">
      <el-table :data="ruleList" style="width: 100%">
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="ruleNumber" label="计费规则编号" />
        <el-table-column prop="ruleName" label="计费规则名称" />
        <el-table-column prop="freeDuration" label="免费时长(分钟)" />
        <el-table-column prop="chargeCeiling" label="收费上限(元)" />
        <el-table-column prop="chargeType" label="计费方式" />
        <el-table-column prop="ruleNameView" label="计费规则" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button link type="danger" size="small" @click="handleDelete(scope.row.id as number)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.rule-container {
  width: 100%;
  padding: 20px;
  .table {
    width: 100%;
  }
}
.create-container {
  margin: 10px 0;
}
</style>
